<html>

<head>
    <meta charset="utf-8" />
    <title>AJAXJS Web UI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/carousel/carousel.css" />
    <link rel="stylesheet" type="text/css" href="../common/demo.css" />

    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div class="box">
        <h1>Welcome to AJAXJS Web UI</h1>
        <div>
            <menu>
                <span></span>
            </menu>
            <div class="content">
                <h2>Carousel Tab</h2>
                <ul class="list">
                    <li>CSS3 动画加速</li>
                    <li>可自动适应宽度（使用百分比单位），或者强制绝对单位（使用像素单位）</li>
                    <li>自动计算 tab 内容高度</li>
                    <li>TODO：SimpleTab 有 afterRender（只是在第一次触发）事件，但这个 tab 却没有</li>
                </ul>

                <br /> <br />
                <div class="tab">
                    <aj-carousel style="width:70%;"></aj-carousel>
                </div>

                <p>属性说明：</p>
                <table class="aj-table propertyTable">
                    <tr>
                        <th>属性</th>
                        <th>含义</th>
                        <th>类型</th>
                        <th>是否必填</th>
                    </tr>
                    <tr>
                        <td>isMagic</td>
                        <td>是否无缝模式</td>
                        <td>Boolean</td>
                        <td>N，默认 false</td>
                    </tr>
                    <tr>
                        <td>isUsePx</td>
                        <td>推荐使用 百分比，px 的话要考虑滚动条，比较麻烦；<br /> 要使用 px 推荐指定 stepWidth；banner，要使用 px</td>
                        <td>Boolean</td>
                        <td>N，默认 false</td>
                    </tr>
                    <tr>
                        <td>isGetCurrentHeight</td>
                        <td>自动当前项最高，忽略其他高度，这个用在 tab很好，<br /> 比 autoHeight 的好，可视作autoHeight 2</td>
                        <td>Boolean</td>
                        <td>N，默认 true</td>
                    </tr>
                    <tr>
                        <td>initItems</td>
                        <td>输入的数据，结构为 [{name:'foo', content:'bar'}]，<br />其中 content 可包含 HTML 标签</td>
                        <td>Array</td>
                        <td>N=演示数据</td>
                    </tr>
                </table>

            </div>
            <div class="copyright">
                <div></div>
            </div>
        </div>
    </div>
    <script src="../common/demo.js"></script>
    <script src="../../dist/base/prototype.js"></script>
    <script src="../../dist/carousel/carousel.js"></script>
    <script src="../../dist/carousel/carousel-tab.js"></script>
    <script>
        new Vue({
            el: '.tab'
        });
    </script>
</body>

</html>